<template>
    <div class="city">
        <div class="top">
             <!-- 1. 搜索框 -->
            <van-search v-model="searchValue" show-action placeholder="城市/区域/位置" @search="onSearch" @cancel="onCancel"/>
            <!-- 2. 标签页 -->
            <van-tabs v-model:active="activeName" color="#ff9854">
                <template v-for="(value,key,index) in allCities" :key="key" >
                    <van-tab :title="value.title" :name="key"></van-tab>
                </template>
            </van-tabs>
        </div>
        <div class="content">
            <Content  :group-data="currentGroup"></Content>
        </div>
        
       
    </div>
</template>

<script setup>
    import Content from './cpns/content.vue';
    import {ref,computed} from 'vue';
    import { useRouter } from 'vue-router';
    import useCityStore from '@/stores/cityStore';
    import { storeToRefs } from 'pinia';
    const searchValue=ref("")
    const router=useRouter()
    const onCancel=()=>{
        router.back()
    }
    const activeName=ref()
    // 网络请求
   const cityStore= useCityStore()
   cityStore.fetchAllCitiesAction()
   const {allCities}=storeToRefs(cityStore)
   const currentGroup=computed(()=>{
    return allCities.value[activeName.value]
   })

</script>

<style  lang="less" scoped>
    .city{
        .content{
            height: calc(100vh - 98px);
            overflow-y: auto;
        }
    }
</style>